<template>
    <div class="tools" ref="tools">
        <el-tooltip class="item" effect="dark" content="拖 动" placement="bottom">
            <i class="icon icon-drag" @click="openTools('drag',0)"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="旋 转" placement="bottom">
            <i class="icon icon-rotate" @click="openTools('rotate',1)"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="放 大" placement="bottom">
            <i class="icon icon-zoomin" @click="openTools('zoomin',2)"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="缩 小" placement="bottom">
            <i class="icon icon-zoomout" @click="openTools('zoomout',3)"></i>
        </el-tooltip>
        <span></span>
        <!-- <el-tooltip class="item" effect="dark" content="上一张" placement="bottom">
            <i class="icon icon-up" @click="openTools('up',4)"></i>
        </el-tooltip>
        <el-tooltip class="item" effect="dark" content="下一张" placement="bottom">
            <i class="icon icon-down" @click="openTools('down',5)"></i>
        </el-tooltip>-->
        <span></span>
    </div>
</template>
<script>
import Vue from "vue";
import { mapState, mapGetters, mapMutations, mapActions } from "vuex";
import bus from "@/assets/js/bus";
import busType from "@/assets/js/busType";

export default {
    name: "labelTool",
    props: {
        // markData:null
    },
    data() {
        return {};
    },
    computed: {
        ...mapState(["labelState"]),
        ...mapGetters(["markData"])
    },
    created() {},
    mounted() {
        //初始化激活拖动
        let ary = this.$refs.tools.getElementsByClassName("icon");
        Array.from(ary)[0].className += " active";
    },
    destroyed() {},
    watch: {},
    methods: {
        classReset() {
            let ary = this.$refs.tools.getElementsByClassName("icon");
            Array.from(ary).forEach(item => {
                if (item.className.indexOf("active") > -1) {
                    item.className = item.className
                        .replace("active", "")
                        .trim();
                }
            });
        },
        openTools(x, index) {
            this.classReset();

            this.$store.dispatch("setOpenTools", x);

            let ary = this.$refs.tools.getElementsByClassName("icon");
            Array.from(ary)[index].className += " active";
        }
    }
};
</script>
<style>
@import "./labelTool.css";
</style>
